<template>
  <div class="products-container">
    <div v-for="(product, index) in products" :key="index" class="product-card">
      <van-card
        :price="product.price"
        :desc="product.desc"
        :title="product.title"
        :thumb="product.thumb"
        :currency="'积分：'"
        class="custom-card"
      >
        <template #tags>
          <van-tag
            v-for="(tag, tagIndex) in product.tags"
            :key="`tag-${index}-${tagIndex}`"
            plain
            type="danger"
            class="custom-tag"
          >
            {{ tag }}
          </van-tag>
        </template>
        <template #footer>
          <div class="footer-actions">
            <van-button
              size="mini"
              @click="handleBuy(product)"
              class="buy-button"
            >
              购买
            </van-button>
            <van-button
              size="mini"
              @click="handleDetails(product)"
              class="details-button"
            >
              详情
            </van-button>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
// 导入 Vant 组件
import { Card, Tag, Button } from "vant";
// 导入 Vant 样式（如果在主入口已全局导入，此处可省略）
// import "vant/lib/index.css";

export default {
  name: "ShopPage",
  components: {
    "van-card": Card,
    "van-tag": Tag,
    "van-button": Button,
  },
  data() {
    return {
      products: [
        {
          price: "2.00",
          desc: "商品描述1",
          title: "商品标题1",
          thumb: "https://example.com/product1.jpg",
          tags: ["新品", "热销"],
        },
        {
          price: "3.50",
          desc: "商品描述2",
          title: "商品标题2",
          thumb: "https://example.com/product2.jpg",
          tags: ["优惠", "推荐"],
        },
        {
          price: "3.50",
          desc: "商品描述3",
          title: "商品标题3",
          thumb: "https://example.com/product2.jpg",
          tags: ["惊爆价", "大甩卖"],
        },
        // 可以继续添加更多商品数据
      ],
    };
  },
  methods: {
    handleBuy(product) {
      console.log("购买商品:", product);
    },
    handleDetails(product) {
      console.log("查看商品详情:", product);
    },
  },
};
</script>

<style scoped>
.product-card {
  margin-bottom: 16px; /* 根据需要调整商品卡之间的间距 */
}
.products-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 或者使用 space-between、space-around 等值来调整水平间距 */
  gap: 20px; /* 使用 gap 属性来设置格子之间的间距，这样就不需要单独设置 margin 了 */
  margin-top: 20px; /* 添加这个属性来增加距离手机顶部的距离 */
}

.product-card {
  width: calc(90% - 35px);
  margin-bottom: 24px; /* 调整商品卡片之间的垂直间距 */
}

.custom-card {
  border-radius: 12px; /* 增加卡片边框圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加卡片阴影效果 */
  transition: box-shadow 0.3s ease; /* 添加阴影过渡效果 */
  padding: 20px;
}

.custom-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 鼠标悬停时增加阴影深度 */
}

.custom-tag {
  margin-right: 4px; /* 调整标签之间的间距 */
}

.footer-actions {
  display: flex;
  justify-content: space-between; /* 调整按钮之间的水平间距 */
}

.buy-button {
  background-color: #ff6b00; /* 自定义购买按钮的背景颜色 */
  color: white; /* 自定义购买按钮的文本颜色 */
}

.details-button {
  background-color: #00a65a; /* 自定义详情按钮的背景颜色 */
  color: white; /* 自定义详情按钮的文本颜色 */
}
</style>
